<template>
	<view class="device">

		<!--模态框是否确认删除设备-->
		<u-modal :showCancelButton='true' @confirm='modalConfirm' @cancel='modalCancel' :show="showModal"
			cancelColor='#FFFFFF' confirmColor='#FFFFFF' title="是否确定删除"></u-modal>
		<bakc
			:text="vuex_select_equipment.deviceName"
			:isReturn="true" />
		<!--提示消息-->
		<u-toast ref="uToast"></u-toast>
		<view class="content">
			<view style="height: 100rpx;"></view>

			<!--设备背景-->
			<view style="position: relative;">
				<image src="/static/mecha/select_equipment/equipment.png" style="width: 350rpx; height:360rpx ;" />
				<image class="backdrop" :src="vuex_select_equipment.appearance.appearanceImg"
					style="width: 348rpx; height:228rpx;  position: absolute; top: 0; left: 0; " />


				<view class="offline_online">
					<view v-if="deviceIsOnline()" class="is_online" style="width: 70rpx;   margin-left: 148rpx; ">在线</view>
					<view v-else class="is_online" style="margin-left: 148rpx;">离线</view>
				</view>
			</view>

			<view style="height: 50rpx;"></view>


			<!--名称-->
			<view class="item" @click="routeJump('pages/updateDeviceInformation/updateDeviceInformation')">
				<view style="width: 40rpx;"></view>
				<view style="width: 120rpx;">名称</view>
				<view style="width: 230rpx;"></view>
				<view class="settings">
					<view style="color: #AFAFAF; width:210rpx;">
						{{ vuex_select_equipment.deviceName }}
					</view>
					<view style="width: 10rpx;"></view>
					<image class="backdrop" src="../../static/icon/right_jt.png" style="width: 30rpx; height:30rpx ;" />
				</view>
			</view>

			<!--待定-->
			<view class="item"
				style="height: 260rpx; flex-direction: column; position: relative; border-radius: 40rpx;">
				<view style="height: 40rpx;"></view>
				<view class="settings">
					<view style="display: flex; align-items: center; ">
						<view>设备亮度调节</view>
						<view style="width: 90rpx;"></view>
						<view>自动</view>
						<view style="width: 20rpx;"></view>
						<u-switch activeColor="#BD9D5F" inactiveColor='#181818' v-model="valueSwitch"
							@change="changeSwitch" size="35"></u-switch>
						<view style="width: 20rpx;"></view>
						<view>手动</view>
						<view style="width: 15rpx;"></view>
						<!-- <radio-module @openBrightnessControl='openBrightnessControl' /> -->
					</view>
				</view>

				<!--滑动框-->
			<!-- 	<view class="rank">
					<view class="rank_item"></view>
				    <view style="width: 10rpx;"></view>
					<view class="rank_item"></view>
					<view style="width: 10rpx;"></view>
					<view class="rank_item"></view>
					<view style="width: 20rpx;"></view>
					<view class="rank_item"></view>
				</view> -->
				<!--文本-->
				<view style="height: 40rpx;"></view>
				<view class="rank_text">
					<view style="width: 74rpx;"></view>
					<view class="text_item">0级</view>
					<view style="width: 62rpx;"></view>
					<view class="text_item">1级</view>
					<view style="width: 74rpx;"></view>
					<view class="text_item">2级</view>
					<view style="width: 74rpx;"></view>
					<view class="text_item">3级</view>
					<view style="width: 86rpx;"></view>
					<view class="text_item">4级</view>
					<view style="width: 84rpx;"></view>
					<view class="text_item">5级</view>
				</view>
				<view style="height: 40rpx;"></view>
				
				<view style="width: 94%; height: 200rpx; opacity: 0.3;" v-if="sliderDisabled">
					<u-slider disabled  blockSize='20' block-width="40" @change='changeSlider' v-model="value"
						activeColor="#BC9C5E" block-color='#BC9C5E' inactiveColor="#000000" step="20" min="0"
						max="100"></u-slider>
				</view>
				
				<view style="width: 94%; height: 200rpx;" v-else>
					<u-slider blockSize='20' block-width="40" @change='changeSlider' v-model="value"
						activeColor="#BC9C5E" block-color='#                                                                                                                                                ' inactiveColor="#000000" step="20" min="0"
						max="100"></u-slider>
				</view>

			</view>


			<!--待定-->
			<view class="item" @click="selectDevice">
				<view style="width: 40rpx;"></view>
				<image class="backdrop" src="../../static/icon/select_incon.png" style="width: 40rpx; height:40rpx ;" />
				<view style="width: 320rpx;"></view>
				<view class="settings">
					<view style="width: 210rpx;">选择设备</view>
					<image class="backdrop" src="../../static/icon/right_jt.png" style="width: 30rpx; height:30rpx ;" />
				</view>
			</view>




			<view style="height: 100rpx;"></view>
			<!--删除设备按钮-->
			<view class="delete_device" @click="showModal = true">
				<view class="text">删除设备</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		removeBinding
	} from '@/config/api.js';

	export default {
		data() {
			return {
				sliderDisabled: true,
				valueSwitch: false,
				//是否确认删除设备模态框
				showModal: false,

				value: 100,
				showPopup: false,
				//设备状态对象
				equipmentSatus: {
					offline: 1, //离线,
					online: 2, //在线
					newEquipment: 3 //新设备
				},

				//成功提示
				success: {
					type: 'success',
					title: '成功主题(带图标)',
					message: "删除成功",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				},
				
				//记录上一次值
			    isAuto:  '',
				valueLamplight: '',
			}
		},
		onLoad() {
			this.getLuminance();
			
			this.realTimeMonitoring();
		},
		methods: {
			
			//实时监听设备是否熄灯 
			realTimeMonitoring(){
			  setInterval(()=>{
				  this.getLuminance(false,true);
			  },1000)
			},
			
			//开关方法
			changeSwitch(e) {
				console.log('change', e);
				this.openBrightnessControl(e);
			},

			//模态框的取消
			modalCancel() {
				this.showModal = false;
			},

			//确认删除
			modalConfirm() {
				this.deleteDevice();
			},

			//判断设备是否在线
			deviceIsOnline() {
			  return this.vuex_select_equipment.status == this.equipmentSatus.online;
			},

			//选择自动或手动触发此方法
			openBrightnessControl(isAuto) {
				if (!isAuto) {
					this.sliderDisabled = true;
					this.sendMessage("clear", this.vuex_select_equipment.mac + "|lightlevel:" + 5 + "-" + 1);
					this.getLuminance(true);
				}else{
					this.sendMessage("clear", this.vuex_select_equipment.mac + "|lightlevel:" + this.value / 20 + "-" +0);
					this.sliderDisabled = false;
				}
			},


			//获取设备亮度
			getLuminance(isAuto,isMqtt) {
				
				//判断上次的值是否和这次的值一样
				let isAutoMqtt = this.vuex_select_equipment.light[1];
				let valueLamplightMqtt = this.vuex_select_equipment.light[0];
				
				//判断是否是mqtt更新的值
				if(isMqtt){
					if(this.isAuto == isAutoMqtt && valueLamplightMqtt == this.valueLamplight){
						return;
					}
				}
				
				
				//判断设备发送给我的状态是手动还是自动  0 手动 1 自动
				if (!isAuto) {
					if(isAutoMqtt == 1){
						this.sliderDisabled = true;
						this.valueSwitch = false;
					}else{
						this.sliderDisabled = false;
						this.valueSwitch =  true;
					}
				}
				
				
				var now = new Date().getHours();
				if (isAuto) {  
					if (now > 6 && now < 18) {
						this.value = 5 * 20;
					} else {
						this.value = 0;
					}
				} else {
					this.value = valueLamplightMqtt * 20;
				}
				
				//记录上一次灯光的值
				this.isAuto = isAutoMqtt;
				this.valueLamplight = valueLamplightMqtt;

			},

			openPopup() {
				this.showPopup = true;
			},

			closePopup() {
				this.showPopup = false;
			},

			//拖拽改變
			changeSlider(luminance) {
				this.value = luminance;
				let luminanceLeve = luminance / 20;
				this.sendMessage("clear", this.vuex_select_equipment.mac + "|lightlevel:" + luminanceLeve + "-" + 0);
			},

			//路由跳转
			routeJump(path) {
				uni.$u.route({
					url: path
				})
			},


			//提升消息
			showToast() {
				this.$refs.uToast.show({
					...this.success,
					complete() {
						this.success.url && uni.navigateTo({
							url: this.success.url
						})
					}
				})
			},

			//选择设备
			selectDevice() {
				uni.showLoading({
					title: '查询设备中...',
					mask: true
				})
				this.$bus.$emit('refresh_new_page');
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/newPage/newPage',
						fail: (e) => {}
					});
				}, 600)
			},

			//删除设备
			async deleteDevice() {
				//设置请求信息
				uni.showLoading({
					title: '删除设备中...',
					mask: true
				})
				let removeId = this.vuex_select_equipment.id ? this.vuex_select_equipment.id : this.vuex_new_equipment
					.id;
				const resp = await removeBinding(removeId);

				//删除这个设备的近期使用时间
				this.delUseTime(this.vuex_select_equipment);

				// this.showToast();
				//调用解除绑定设备方法
				this.sendMessage("clear", this.vuex_select_equipment.mac + "|clear");
				//路由跳转到设备选择页面
				this.$bus.$emit('refresh_new_page');
				setTimeout(() => {
					uni.showLoading();
					uni.switchTab({
						url: '/pages/newPage/newPage',
						fail: (e) => {
							console.log(e);
						}
					});
				}, 3000)

			},

			//保存用户最近使用的设备
			delUseTime(item) {
				//保存改该设备的一个使用时间
				let evenNumbers = this.vuex_recent_equipment.filter(data => {
					let isReturn = data.indexOf(item.mac) > -1;
					return !isReturn;
				});
				this.$u.vuex('vuex_recent_equipment', evenNumbers);
			},

			//解除设备绑定
			sendMessage(theme, sendMsg) {
				//this.switches 主题名称。buffer 发送的参数。可以是字符串 也可以是 Buffer；
				this.vuex_mqtt.publish(theme, sendMsg, (e) => {
					console.log("mqtt消息发送成功", e)
				})
			},

		}


	}
</script>

<style lang="scss" scoped>
	/*
	  弹出层css
	 **/
	.popup_slider {
		height: 500rpx;
		background: #353535;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}

	.is_online {
		color: #BC9C5E;
	}

	.device {
		background: #181818;
		height: 100vh;

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.offline_online {
			width: 300rpx;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			bottom: 60rpx;
			left: 30rpx;
		}

		.item {
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 95%;
			height: 120rpx;
			background: rgb(53, 53, 53);
			border-radius: 80rpx;
			margin-top: 30rpx;


			.rank {
				top: 176rpx;
				position: absolute;
				width: 300rpx;
				display: flex;
				justify-content: space-between;

				.rank_item {
					width: 6rpx;
					height: 36rpx;
					background: #181818;
				}
			}

			.rank_text {
				display: flex;
				width: 94%;
				justify-content: center;
				font-size: 14px;

				.text_item {
					width: 120rpx;
				}
			}

			.settings {
				display: flex;
				align-items: center;
			}
		}

		.delete_device {
			margin: 0 auto;
			height: 63px;
			background: rgb(53, 53, 53);
			width: 650rpx;
			border-radius: 18px;

			.text {
				text-align: center;
				line-height: 63px;
				color: white;
			}

		}
	}
</style>